<include file="Public/header" />
<include file="Public/accountfooter" />
<div data-role="page"  >
    <div data-role="header" data-position="fixed" data-tap-toggle="false"data-theme="l">
      <a href="#sharePanel" style="display:inline-block;margin-top:10px;"><i class="fa fa-list"></i></a>
      <h1><font class="panel-title"><i class="fa fa-map-marker"></i>
          <{$clientAddress}> &nbsp;&nbsp;<small >[当前城市]</small></font></h1>
    </div>
<include file="Public/common" />
<div data-role="main" class="ui-content">
        <div class="panel-heading">
             <h4><small>更新时间 ：<{$weatherBasic['update']['loc']}></small></h4>
        </div>
        <div class="well text-center">
          <img src="<{$weatherNow['cond']['icon']}>" title="<{$weatherNow['cond']['text']}>" class="weather-icon-stylie">
        </div>
        <div class="text-left ">
            <li class="list-group-item ">
              <font class="color-888"><small>实时天气 ： </small><font class="colorCC0033"><{$weatherNow['cond']['txt']}></font></font>
            </li>
            <li class="list-group-item list-group-item-shadow">
                <font class="color-888"><small>环境温度 ：</small><font class="colorCC0033"><{$weatherNow['tmp']}></font> ℃
                <font class="pull-right"><small>体感温度 ： </small><font class="colorCC0033"><{$weatherNow['fl']}></font> ℃</font>
                </font>
            </li> 
            <li class="list-group-item list-group-item-shadow">
              <font class="color-888"><small>风力风向 ：</small><font class="colorCC0033"><{$weatherNow['wind']['dir']}></font> 
                 <span class="pull-right">风力：<font class="colorCC0033"><{$weatherNow['wind']['sc']}></font> 级</span>
               </font>
            </li>
            <li class="list-group-item list-group-item-shadow">
              <font class="color-888">能见度： <font class="colorCC0033"><{$weatherNow['vis']}></font> km</font>
            </li>
            <li class="list-group-item list-group-item-shadow">
              <font class="color-888">相对湿度 ： <font class="colorCC0033"><{$weatherNow['hum']}></font> ％
                 <font class="pull-right">降水量 ： <font class="colorCC0033"><{$weatherNow['pcpn']}></font> ㎜</font>
              </font>
            </li> 
          </div>
          <div class="list-group text-left ">
                <div data-role="navbar">
                  <ul>
                    <li><a href="#">
                        <font>空气质量指数 ： <font class="colorCC0033"><{$weatherAqi['aqi']}></font>
                        <span class="ui-li-count pull-right"><{$weatherAqi['qlty']}></span>
                        </font>
                    </a></li>
                  </ul>
                </div>
                <div class="list-group panel-body">
                   <li class="list-group-item list-group-item-shadow">
                    <font class="panel-title">PM 2.5<span class="pull-right"><font class="colorCC0033"><{$weatherAqi['pm25']}></font>  ug/m³</span></font>
                  </li>
                  <li class="list-group-item list-group-item-shadow">
                    <font class="panel-title">CO <span class="pull-right"><font class="colorCC0033"><{$weatherAqi['co']}></font>  ug/m³ </span></font>
                  </li> 
                  <li class="list-group-item list-group-item-shadow">
                    <font class="panel-title">CO₂ <span class="pull-right"><font class="colorCC0033"><{$weatherAqi['no2']}></font>  ug/m³</span></font>
                  </li>
                  <li class="list-group-item list-group-item-shadow">
                    <font class="panel-title">O3 <span class="pull-right"><font class="colorCC0033"><{$weatherAqi['o3']}></font>  ug/m³</span></font>
                  </li>
                  <li class="list-group-item list-group-item-shadow">
                    <font >SO₂ <span class="pull-right"><font class="colorCC0033"><{$weatherAqi['so2']}></font>  ug/m³</span></font>
                  </li>
                  <li class="list-group-item list-group-item-shadow">
                    <font >PM 10<span class="pull-right"><font class="colorCC0033"><{$weatherAqi['pm10']}></font>   ug/m³</span></font>
                  </li> 
                </div>
          </div>
       <div class="panel panel-default ">
        <div class="panel-heading">
          <font class="panel-title">生活提示</font>
        </div>
        <div class="panel-body">
          <div class="list-group">
            <li class="list-group-item">
            <h4 class="list-group-item-heading">户外运动 ：<font class="colorCC0033"><{$weatherSuggestion['sport']['brf']}></font></h4>
              <hr>
              <p class="list-group-item-text"><{$weatherSuggestion['sport']['txt']}></p>
            </li>
            <li class="list-group-item">
            <h4 class="list-group-item-heading">外出旅行 ：<font class="colorCC0033"><{$weatherSuggestion['trav']['brf']}></font></h4>
              <hr>
              <p class="list-group-item-text"><{$weatherSuggestion['trav']['txt']}></p>
            </li>
          </div>
        </div><!--panel-body-->
      </div><!----panel-primary -->
      <div class="panel panel-default">
        <div class="panel-heading">
          <font class="panel-title">七天天气预报</font>
        </div>
        <div class="panel-body">
          <div  data-example-id="togglable-tabs">
              <ul id="myTabs" class="nav nav-tabs" role="tablist">
                <volist name='weatherDailyForecast' id="vo" key="k">
                  <if condition="$k eq 1">
                      <li role="presentation"  class="active">
                  <else/>
                      <li role="presentation" >
                  </if>
                      <a href="#weatherDailyForecastDiv<{$vo.date}>" id="weatherDailyForecastDiv<{$vo.date}>-tab" role="tab" data-toggle="tab" aria-controls="weatherDailyForecastDiv<{$vo.date}>" aria-expanded="true"><{$vo.subDate}></a>
                  </li>
                </volist>
              </ul>
            <div id="myTabContent" class="tab-content">
              <volist name='weatherDailyForecast' id="vo" key="k">
               <if condition="$k eq 1">
                     <div role="tabpanel" class="tab-pane fade active in" id="weatherDailyForecastDiv<{$vo.date}>" aria-labelledby="weatherDailyForecastDiv<{$vo.date}>-tab">
                <else/>
                    <div role="tabpanel" class="tab-pane fade" id="weatherDailyForecastDiv<{$vo.date}>" aria-labelledby="weatherDailyForecastDiv<{$vo.date}>-tab">
                </if>
                  <div class="col-md-12 text-center">
                    <h5>时间 ： <strong><{$vo.date}></strong></h5>
                    <h4><small>相对湿度 ： <span class="colorCC0033"><{$vo.hum}></span> ％</small></h4>
                    <h4><small>降水概率 ： <span class="colorCC0033"><{$vo.pop}></span> ％</small></h4>
                    <h4><small>能见度 ： <span class="colorCC0033"><{$vo.vis}></span> ㎞</small></h4>
                    <h4><small>风向 ： <span class="colorCC0033"><{$vo.wind.dir}></span> </small> <small>「  <{$vo.wind.sc}>  」</small></h4>
                    <h4>
                        <small>最高温度 ： <span class="colorCC0033"><{$vo.tmp.max}></span> ℃</small>
                    </h4>
                    <h4>
                        <small>最低温度 ： <span class="colorCC0033"><{$vo.tmp.min}></span> ℃</small>
                    </h4>
                  </div>
                  <div class="col-xs-12 text-center">
                    <hr>
                    <h4 class="pull-left"><i class="fa fa-sun-o"></i> &nbsp; <strong>白天</strong></h4>
                    <h4 class="pull-left"><small> &nbsp;  &nbsp; 日出 ： <{$vo.astro.sr}></small></h4>
                    <img src="<{$vo.cond.icon_d}>" alt="<{$vo.cond['txt_d']}>" class="weather-icon-stylie">
                    <div class="list-group text-center ">
                        <li class="list-group-item  list-group-item-warning">
                          <font class="panel-title">天气状况 ： <font class="colorCC0033"><{$vo.cond.txt_d}></font>
                          </font>
                        </li>
                    </div>
                  </div>
                  <div class="col-md-6 col-xs-12 text-center">
                    <h4 class="pull-left"><i class="fa fa-moon-o"></i> &nbsp; <strong>夜间</strong></h4>
                    <h4 class="pull-left"><small> &nbsp;  &nbsp; 日落 ： <{$vo.astro.ss}></small></h4>
                    <hr>
                    <img src="<{$vo.cond.icon_n}>" alt="<{$vo.cond['txt_n']}>" class="weather-icon-stylie">
                    <div class="list-group text-center ">
                        <li class="list-group-item  list-group-item-warning">
                          <font class="panel-title">天气状况 ： <font class="colorCC0033"><{$vo.cond.txt_n}></font>
                          </font>
                        </li>
                    </div>
                  </div>
                </div><!--tab div end-->
              </volist>
            </div>
          </div><!--tab-list end-->
        </div><!--panel body end-->
     <div class="col-md-3" >
          <section class="side-div">
            <li class="list-group-item color-f0ad4e col-md-12 text-center"><font class="panel-title">每三小时天气情况</font></li>
            <li class="clearfix visible-lg" >&nbsp;</li>
            <volist name="weatherHourlyForecast" id="vo">
              <div class="panel panel-default">
                <div class="panel-heading">
                    <font class="panel-title"><{$vo.date}></font>
                </div>
                <div class="list-group weather-hour-div" >
                  <li class="list-group-item">
                    <font>温度 ： <{$vo.tmp}> ℃</font>
                  </li>
                  <li class="list-group-item">
                    <font>湿度 ： <{$vo.hum}> ％</font>
                  </li>
                  <li class="list-group-item">
                    <font>降水 ： <{$vo.pop}> ％</font>
                  </li>
                  <li class="list-group-item">
                    <font> <{$vo.wind.dir}> 「  <{$vo.wind.sc}>  」</font>
                  </li>
                </div>
              </div>
            </volist>
          </section>
        </div><!--col-md-3 end -->
  </div><!--content end-->


<include file="Public/footer"/>